import React from 'react'

import { Switch, Route, Redirect } from 'react-router-dom'
import {DotLoading} from 'antd-mobile'
import PrivateRoute from './utils/PrivateRoute'
// import Login from './pages/Login/Login'
// import Register from './pages/Register/Register'
// import Index from './pages/Index/Index'
// import Detail from './pages/Detail/Detail'
// import List from './pages/List/List'
// import Search from './pages/Search/Search'


const Register = React.lazy(() => import('./pages/Register/Register'))
const Login = React.lazy(() => import('./pages/Login/Login'))
const Index = React.lazy(() => import('./pages/Index/Index'))
const Detail = React.lazy(() => import('./pages/Detail/Detail'))
const List = React.lazy(() => import('./pages/List/List'))
const Search = React.lazy(() => import('./pages/Search/Search'))

export default function App() {
  return (
    <div className='app'>
      <React.Suspense fallback={<DotLoading color='primary' />}>
        {/* 路由视图 */}
        <Switch>
          {/* Route 路由规则 */}
          <Route path='/login' component={Login}></Route>
          <Route path='/Register' component={Register}></Route>
          <PrivateRoute path='/Index' component={Index}></PrivateRoute>
          <PrivateRoute path='/Detail/:id' component={Detail}></PrivateRoute>
          <PrivateRoute path='/List' component={List}></PrivateRoute>
          <PrivateRoute path='/Search' component={Search}></PrivateRoute>

          {/* 重定向 */}
          <Redirect to='/login'></Redirect>
        </Switch>
      </React.Suspense>

    </div>
  )
}
